<template>
  <div class="code_big_box">
    <div class="code_top_box">
      <div class="coded_top">
        <span>
          请输入验证码
        </span>
      </div>
    </div>
    <div class="code_input_box">
      <div class="code_input">
        <van-password-input
          :value="inputCodeNumber"
          :gutter="5"
          :length="6"
          :mask='false'
          :focused="showKeyboard"
          @focus="showKeyboard = true"
        />
        <van-number-keyboard
          v-model="inputCodeNumber"
          :show="showKeyboard"
          :length="6"
          @blur="showKeyboard = false"
        />
      </div>
    </div>
    <div class="re_get_code">
      <span @click="reLoadCode">重新获取验证码</span>
    </div>
    <div class="code_btn_box">
      <div class="btn_box">
        <van-button type="primary" size="large" @click="loginIndex">登录</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { getUserAppCheckWeChat,getUserAppLoginWeChat,getUserAppMobileRegisterCWeChat } from './api'
export default {
  data() {
    return {
      inputCodeNumber:'', // 输入的验证码
      showKeyboard:false, // 数字键盘的显示状态
      phoneNumber:'', // 当前接受短信的手机号码
    }
  },
  methods: {
    // 重新获取验证码
    reLoadCode(){
      Toast('重新获取验证码!')
    },
    // 登录
    async loginIndex(){
      if(this.inputCodeNumber.length < 6) return Toast('您输入的验证码有误')
      let params = {
        mobile:this.phoneNumber,
        code:this.inputCodeNumber
      }
      const data = await getUserAppCheckWeChat(params)
      if (data.code !== 0) return Toast(data.msg)
      this.initMobileRegisterCWeChat()
      /* const data = await getUserAppLoginWeChat(params)
      if (data.msg == '用户不存在') return this.initMobileRegisterCWeChat()
      if (data.code !== 0) return Toast(data.msg)
      let token = data.data.token
      sessionStorage.setItem('token', token);
      let id = this.$route.query.id
      this.$router.push({
        name:'newFindCarDetail',
        query:{
          id
        }
      }) */
    },
    // 用户不存在 => 注册账号登录
    async initMobileRegisterCWeChat(){
      let params = {
        mobile:this.phoneNumber
      }
      const data = await getUserAppMobileRegisterCWeChat(params)
      if (data.code !== 0) return Toast(data.msg)
      let token = data.data.token
      sessionStorage.setItem('token', token);
      let id = this.$route.query.id
      this.$router.push({
        name:'newFindCarDetail',
        query:{
          id
        }
      })
    }
  },
  created() {
    document.title = "获取验证码";
    this.phoneNumber = this.$route.query.phoneNumber
  },
  watch: {
    showKeyboard: function(newVal, oldVal){
      if (newVal == true) {
        document.querySelectorAll('.van-password-input__item')[0].style.borderBottom = '2px solid #FE8C19';
      }else if (newVal == false && this.inputCodeNumber.length == 0) {
        document.querySelectorAll('.van-password-input__item')[0].style.borderBottom = '2px solid #EEEEEE';
      }
    },
    inputCodeNumber: function(newVal, oldVal){
      let textLength = newVal.length
      if (textLength >= 6){
        this.showKeyboard = false
        return this.inputCodeNumber
      }else{
        document.querySelectorAll('.van-password-input__item')[textLength].style.borderBottom = '2px solid #FE8C19';
        document.querySelectorAll('.van-password-input__item')[textLength+1].style.borderBottom = '2px solid #EEEEEE';
      }
    }
  },
}
</script>

<style lang="less" scoped>
.code_big_box{
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  .code_top_box{
    height: 100px;
    .coded_top{
      height: 42px;
      font-size: 30px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 42px;
      padding: 40px 0 16px 30px;
    }
  }
  .code_input_box{
    .code_input{
      /deep/ .van-password-input__item{
        width: 49px;
        border-bottom: 2px solid #eeeeee;
      }
      /* /deep/ .van-password-input__item:nth-child(1){
        border-bottom: 2px solid red;
      } */
    }
  }
  .re_get_code{
    height: 58px;
    display: flex;
    justify-content: flex-end;
    margin: 17px 30px 0 0;
    span{
      height: 21px;
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 21px;
    }
  }
  .code_btn_box{
    display: flex;
    justify-content: center;
    .btn_box{
      width: 90vw;
      height: 25px;
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #B3B3B3;
      line-height: 25px;
    }
  }
}
</style>